<template>
  <div class="dialog_info">
    <div class="dialog_info_title">
      <div class="dialogTab">
        <span
          v-for="(item, index) in tabTitList"
          :key="index"
          :class="{ activeTab: selectNum == index }"
          class="tabTit"
          @click="changeDig($event,index)"
        >
          {{ item }}
        </span>
      </div>
      <div v-show="selectNum == 0" class="water-table">
        <RainInfo ref="rainInfo" />
      </div>
      <div v-show="selectNum == 1" class="water-table zhouDataTable m-t-10">
        <el-table
          v-loading="loading"
          :data="zhouDataList.data"
          element-loading-background="rgba(0, 0, 0, 0.2)"
          class="flagTable rainLimitTable"
          style="width: 100%"
          
        >
        <template slot="empty" >
            <img  src="@/assets/dialog/NoDataicon.png" alt="">
          </template>
          <el-table-column prop="countyAdnm" align="center" label="县名" />
          <el-table-column prop="adnm" align="center" label="村庄名称" />
          <el-table-column prop="pCount" align="center" label="人口 " />
          <el-table-column prop="htCount" align="center" label="户数" />
          <el-table-column prop="plarea" align="center" label="防洪能力" />
          <el-table-column label="预警指标(mm)" align="center">
            <el-table-column align="center" label="1h" >
                <template slot-scope="{row}">
                    <span>{{ row.drp1H ? row.drp1H + 'mm' : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="3h" >
                <template slot-scope="{row}">
                    <span>{{ row.drp2H ? row.drp2H + 'mm' : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="6h" >
                <template slot-scope="{row}">
                    <span>{{ row.drp3H ? row.drp3H + 'mm' : '' }}</span>
                </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="drp3H" label="防汛预案" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.wordPath && scope.row.wordPath != ''" type="primary">
                <el-link :href="scope.row.wordPath" target="_blank">查看</el-link>
              </el-button>
              <span v-else>/</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-wrap">
          <el-pagination
            background
            prev-text="上一页"
            next-text="下一页"
            :page-sizes="pageInfo.sizeList"
            :current-page="Pageipage"
            :page-size="Pageirows"
            :total="zhouDataList.dataCount"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <div v-show="selectNum == 2" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="water-table">
        <div class="JibenTable">
          <ul>
            <li><div><div>测站编码</div><div>{{ JibenTable.stcd  ? JibenTable.stcd : '&nbsp;' }}</div></div></li>
            <li><div><div>测站名称</div><div>{{ JibenTable.stnm ? JibenTable.stnm : '&nbsp;' }}</div></div></li>
            <li><div><div>河流名称</div><div>{{ JibenTable.rvnm ? JibenTable.rvnm : '&nbsp;' }}</div></div></li>
            <li><div><div>行政区划</div><div>{{ JibenTable.addvNM ? JibenTable.addvNM : '&nbsp;' }}</div></div></li>
            <li><div><div>水文经度</div><div>{{ JibenTable.lgtd ? JibenTable.lgtd : '&nbsp;' }}</div></div></li>
            <li><div><div>水文纬度</div><div>{{ JibenTable.lttd ? JibenTable.lttd : '&nbsp;' }}</div></div></li>
            <li><div><div>隶属行业单位</div><div>{{ JibenTable.atcunit ? JibenTable.atcunit : '&nbsp;' }}</div></div></li>
            <li><div><div>基面名称</div><div>{{ JibenTable.dtmnm ? JibenTable.dtmnm : '&nbsp;' }}</div></div></li>
            <li><div><div>基面高程(m)</div><div>{{ JibenTable.dtmel ? JibenTable.dtmel : '&nbsp;' }}</div></div></li>
            <li><div><div>基面修正值</div><div>{{ JibenTable.dtpr ? JibenTable.dtpr : '&nbsp;' }}</div></div></li>
            <li><div><div>站类</div><div>{{ JibenTable.Sttp1 ? JibenTable.Sttp1 : '&nbsp;' }}</div></div></li>
            <li><div><div>报汛等级</div><div>{{ JibenTable.Frgrd1 ? JibenTable.Frgrd1 : '&nbsp;' }}</div></div></li>
            <li><div><div>建站年月</div><div>{{ JibenTable.esstym ? JibenTable.esstym : '&nbsp;' }}</div></div></li>
            <li><div><div>始报年月</div><div>{{ JibenTable.bgfrym ? JibenTable.bgfrym : '&nbsp;' }}</div></div></li>
            <li><div><div>交换管理单位</div><div>{{ JibenTable.locality ? JibenTable.locality : '&nbsp;' }}</div></div></li>
            <li><div><div>测站岸别</div><div>{{ JibenTable.Stbk1 ? JibenTable.Stbk1 : '&nbsp;' }}</div></div></li>
            <li><div><div>测站方位</div><div>{{ JibenTable.stazt ? JibenTable.stazt : '&nbsp;' }}</div></div></li>
            <li><div><div>至河口距离(m)</div><div>{{ JibenTable.dstrvm ? JibenTable.dstrvm : '&nbsp;' }}</div></div></li>
            <li><div><div>集水面积(km²)</div><div>{{ JibenTable.drna ? JibenTable.drna +'km²': '&nbsp;' }}</div></div></li>
            <li><div><div>拼音码</div><div>{{ JibenTable.phcd ? JibenTable.phcd : '&nbsp;' }}</div></div></li>
            <li><div><div>启用标志</div><div>{{ JibenTable.Usfl1 ? JibenTable.Usfl1 : '&nbsp;' }}</div></div></li>
            <li><div><div>信息管理单位</div><div>{{ JibenTable.admauth ? JibenTable.admauth : '&nbsp;' }}</div></div></li>
            <li><div><div>备注</div><div>{{ JibenTable.comments ? JibenTable.comments : '&nbsp;' }}</div></div></li>
            <li><div><div>站址</div><div>{{ JibenTable.stlc ? JibenTable.stlc : '&nbsp;' }}</div></div></li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import RainInfo from './rainInfo.vue'
import {
    GetSurroundingVillageBySt,
    GetStationInfo
} from '@/api/xuna.js'
import MixinPage from '@/views/components/MixinPage'

export default {
    components: {
        RainInfo
    },
    mixins: [MixinPage],
    data() {
        return {
            selectNum: 0,
            tabTitList: ['雨情信息', '周边村庄', '基本信息'],
            tabsName: '雨情信息',
            parameterDlg: '',
            zhouDataList: [],
            Pageipage: 1,
            Pageirows: 10,
            tab2: false,
            tab3: false,
            JibenTable: {},
            loading: false
        }
    },
    created() {
        const getRainParmas = this.$store.getters.dlgParams.params
        this.parameter = getRainParmas
        // this.TimeRainDlg = [this.parameter.strBegin, this.parameter.strEnd]
    },
    methods: {
        changeDig(e, index) {
            this.selectNum = index
            if (index === 1) {
                if (!this.tab2) {
                    this.getZhouData()
                }
            } else if (index === 2) {
                if (!this.tab3) {
                    this.JibenGetData()
                }
            }else if(index == 0){
               this.$nextTick(() => {
                   this.$refs.rainInfo.handleRisz();
                })
            }
        },
        handleClose() {
            this.$emit('closeAutographDialog')
        },
        getZhouData() {
            this.loading = true
            const params = {
                stcd: this.parameter.stcd,
                page: this.Pageipage,
                limit: this.Pageirows
            }
            GetSurroundingVillageBySt(params).then((res) => {
                console.log('res: ', res);
                if (res.isSuccess) {
                    this.loading = false
                    this.tab2 = true
                    this.zhouDataList = res
                    // console.log(this.zhouDataList)
                }
            })
        },
        JibenGetData() {
            this.loading = true
            GetStationInfo({
                stcd: this.parameter.stcd
            }).then((res) => {
                if (res.isSuccess) {
                    this.loading = false
                    this.tab3 = true
                    const objData = res.data
                    // 站类
                    if (objData.sttp == 'MM') {
                        objData.Sttp1 = '气象站'
                    } else if (objData.sttp == 'PP') {
                        objData.Sttp1 = '雨量站'
                    } else if (objData.sttp == 'BB') {
                        objData.Sttp1 = '蒸发站'
                    } else if (objData.sttp == 'ZQ') {
                        objData.Sttp1 = '河道水文站'
                    } else if (objData.sttp == 'DD') {
                        objData.Sttp1 = '堰闸水文站'
                    } else if (objData.sttp == 'ZZ') {
                        objData.Sttp1 = '河道水位站'
                    } else if (objData.sttp == 'TT') {
                        objData.Sttp1 = '潮位站'
                    } else if (objData.sttp == 'RR') {
                        objData.Sttp1 = '水库水文站'
                    } else if (objData.sttp == 'DP') {
                        objData.Sttp1 = '泵站'
                    } else if (objData.sttp == 'ZG') {
                        objData.Sttp1 = '地下水站'
                    } else if (objData.sttp == 'SS') {
                        objData.Sttp1 = '墒情站'
                    } else {
                        objData.Sttp1 = '分洪水位站'
                    }
                    // 启用标志
                    if (objData.usfl == 1) {
                        objData.Usfl1 = '启用'
                    } else {
                        objData.Usfl1 = '不启用'
                    }
                    // 报汛等级
                    if (objData.frgrd == 1) {
                        objData.Frgrd1 = '中央报汛站'
                    } else if (objData.frgrd == 2) {
                        objData.Frgrd1 = '省级重点报汛站'
                    } else if (objData.frgrd == 3) {
                        objData.Frgrd1 = '省级一般报汛站'
                    } else if (objData.frgrd == 4) {
                        objData.Frgrd1 = '其他报汛站'
                    } else {
                        objData.Frgrd1 = '山洪报汛站'
                    }
                    // 测站岸别
                    if (objData.stbk == 1) {
                        objData.Stbk1 = '右岸'
                    } else if (objData.stbk == 2) {
                        objData.Stbk1 = '左岸'
                    } else {
                        objData.Stbk1 = ''
                    }
                    this.JibenTable = objData
                }
                // console.log(res)
            })
        },
        /** 显示条数*/
        handleSizeChange(val) {
            this.Pageirows = val
            this.getZhouData()
        },
        /** 翻页*/
        handleCurrentChange(val) {
            this.Pageipage = val
            this.getZhouData()
        }
    }
}
</script>
<style lang="less" scoped>
  .zhouDataTable{
     height: calc(100% - 20px);
    
    
   }
   .flagTable{
     height: calc(100% - 32px);
     padding-bottom:10px;
   }
   .page-wrap{
       height:auto;
   }
    .zhouDataTable /deep/  tr .el-table__cell{
        border-top:none !important;
    }
    .zhouDataTable /deep/ .el-table tbody tr{
        background: rgba(0,150,255,0.3);
    }
    .water-table{
        padding: 0 20px 20px;
        height: 700px;
    }
    .dialogTab{
        //transform: translateY(-10px);
        margin-top:10px
    }
    .tab{
        border-bottom: 1px solid #335875;
        padding-bottom: 15px;
        height: auto;
        overflow: hidden;
    }
	/deep/.el-tabs__nav-scroll {
		justify-content: left !important;
	}

	.zhouDataTable {
		.el-link.el-link--default {
			color: #fff;
		}

		.el-button {
			background-color: #086497;
			border-color: #14275b;
			color: #fff;
			border-radius: 5px;
		}

		.flagTable .el-table__body tr .cell {
			height: 15px;
			line-height: 15px;
		}
        /deep/ .el-table thead tr td{
            border: 0 ;
        }
        /deep/.el-table--enable-row-transition .el-table__body td.el-table__cell{
            border-right: 0 !important;
        }

        /deep/.el-table  tbody tr .el-table__cell{
            border-bottom-color: #051E38 !important;
            font-size: 14px;

        }
        /deep/ .el-table thead tr .el-table__cell{
            border-bottom: 0 !important;
        }
        /deep/ .el-table__row {
            font-size: 14px;
            &>:nth-child(3),&>:nth-child(4),&>:nth-child(6),&>:nth-child(7),&>:nth-child(8){
                font-family:'Number';
                font-size: 16px;

            }
        }
		/deep/ .flagTable th,
		/deep/ .flagTable th,
		.flagTableDiv {
			color: #fff;
		}

		/deep/ .el-table thead.is-group th.el-table__cell {
            border: 0;
            padding: 4px 0;
            color: #00FEFE;
		}

		.el-table--border::after {
			background-color: #14275b;
		}
	}

	.JibenTable {
        padding: 10px 0 30px;
        ul{
            display: flex;
            flex-wrap: wrap;
            background: rgba(0,165,233,0.2);
            font-size: 14px;
            padding: 0 10px ;
            li{
                box-sizing: border-box;
                width: 25%;
                border-bottom: 1px solid #3F72AA ;
                &>div{
                  margin-bottom:10px ;
                  margin-top:10px;
                  border-left: 1px solid #3F72AA ;
                  text-indent: 20px;
                  background: url(../../assets/newimg/矩形.png) no-repeat left center;
                  background-size: auto 66%;
                  background-position:8px 8px ;
                  &>:nth-child(1){
                    color: #A5C2D8;
                    margin-bottom: 4px;
                  }
                }
            }
            &>:nth-child(21),>:nth-child(22),>:nth-child(23),>:nth-child(24){
                border: none;
            }
            &>:nth-child(1),>:nth-child(5),>:nth-child(9),>:nth-child(13),>:nth-child(17),>:nth-child(21){
                &>div{
                    text-indent: 10px !important;
                    border: none;
                    background-position:0 8px !important ;

                }
            }
        }
	}
    /*行间隙*/
    .zhouDataTable /deep/ .el-table__body{
        -webkit-border-vertical-spacing: 7px;  // 垂直间距
    }
</style>
